<template>
  <div class="mt-6 w-full flex flex-col">
    <p class="w-full flex justify-between flex-nowrap flex-row mb-2">
      <span class="mr-2">和解比例</span>
      <el-input-number class="w-full flex-grow-1 mr-2" v-model="value.hj_rate" :min="0" :max="100" @change="onChange"
        :controls="false" :precision="2" placeholder="请输入和解比例" :disabled="props.disabled" />
      <span>%</span>
    </p>
    <p class="w-full flex justify-between flex-nowrap flex-row mb-2">
      <span class="mr-2">诉讼比例</span>
      <el-input-number class="w-full flex-grow-1 mr-2" v-model="value.ss_rate" :min="0" :max="100" @change="onChange"
        :controls="false" :precision="2" placeholder="请输入诉讼比例" :disabled="props.disabled" />
      <span>%</span>
    </p>

    <p class="w-full flex justify-between flex-nowrap flex-row mb-2">
      <span class="mr-2">返点比例</span>
      <el-input-number class="w-full flex-grow-1 mr-2" v-model="value.fd_rate" :min="0" :max="100" @change="onChange"
        :controls="false" :precision="2" placeholder="请输入返点比例" :disabled="props.disabled" />
      <span>%</span>
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      hj_rate: null,
      ss_rate: null,
      fd_rate: null,
    }),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const value = ref({
  hj_rate: props.modelValue?.hj_rate || null,
  ss_rate: props.modelValue?.ss_rate || null,
  fd_rate: props.modelValue?.fd_rate || null,
})

const emit = defineEmits(['update:modelValue', 'change'])

const onChange = () => {
  const hasNull = Object.values(value.value).some((v) => typeof v !== 'number')

  if (hasNull) return

  emit('update:modelValue', value.value)
  emit('change', value.value)
}
</script>
